<template>
	<view>
		<view class="box" v-for="(item, index) in list" :key="index">
			<view class="tilte">{{item.name}}</view>
			<view class="cardList">
				<view class="card" v-for="(obj, iii) in item.arr" :key="iii" @click="skipPageFun(obj)">
					<image v-if="obj.img" :src="obj.img" mode="aspectFill"></image>
					<u-icon v-else :name="obj.icon" color="#007aff" size="68" class="iconClass"></u-icon>
					<view>{{obj.name}}</view>
				</view>
			</view>
		</view>
		<!--无网络提示-->

		<view class="box">
			<view class="tilte">数据统计</view>
			<view class="dateSelectRow">
				<u-select v-model="bmSelectShow" :list="depList" value-name="id" label-name="name"
					@confirm="bmSelectChangeFun"></u-select>
				<u-select v-model="ppSelectShow" :list="perList" value-name="id" label-name="name"
					@confirm="ppSelectChangeFun"></u-select>
				<view>
					<text class="dateText" @click="bmSelectShow = true">
						{{department_name ? department_name : '选择部门'}}
						<u-icon name="arrow-down" size="28" style="padding-left: 12rpx;"></u-icon>
					</text>
				</view>
				<view>
					<text class="dateText" @click="ppSelectShow = true">
						{{period_name ? period_name : '选择下属'}}
						<u-icon name="arrow-down" size="28" style="padding-left: 12rpx;"></u-icon>
					</text>
				</view>
			</view>
			<!--销售简报-->
			<statistics v-if="baoBiaoShow" :department="department" :period="period" :sys_user_id="sys_user_id"></statistics>
		</view>
		
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that = '';

	import {apiCstDict} from '@/api/crm.js'
	import {getMenu} from '@/api/menu.js'
	import {apiSysAuth} from '@/api/admin.js'
	import {getDayByNumFun,getDayFun,getMonthFun} from '@/utils/date.js'
	
	import statistics from '@/components/dashBoard/workorder/statistics.vue';
	
	export default {
		components: {
			statistics
		},
		data() {
			return {
				bmSelectShow: false,
				ppSelectShow: false,
				baoBiaoShow: false, //报表是否展示
				period: 'today',
				period_name: '',
				department: 'myself',
				department_name: '',
				sys_user_id: uni.$userInfo.id,
				depList: [{
						id: 'myself',
						name: '我的工单'
					},
					{
						id: 'mydept',
						name: '本部门工单'
					},
					{
						id: 'mydeptson',
						name: '本部门及下属工单'
					}
				],
				perList: [{
						id: 'yesterday',
						name: '昨天'
					},
					{
						id: 'today',
						name: '今天'
					},
					{
						id: 'week',
						name: '本周'
					},
					{
						id: 'lastweek',
						name: '上周'
					},
					{
						id: 'lastweek',
						name: '本月'
					},
					{
						id: 'lastmonth',
						name: '上月'
					},
					{
						id: 'quarter',
						name: '本季度'
					},
					{
						id: 'lastquarter',
						name: '上季度'
					},
					{
						id: 'year',
						name: '今年'
					},
					{
						id: 'lastyear',
						name: '去年'
					}
				],
				list: getMenu()
			}
		},
		onShow() {
			//判断是否登录，
			if (uni.$isLoginFun()) {

				//this.getBacklogFun();

				// 获取授权菜单数据
				uni.$menuList = uni.getStorageSync('menuList') || '';
				console.log('Storage menuList')
				if (!uni.$menuList) {
					apiSysAuth({
						action: 'sys_auth_access',
					}).then(res => {
						uni.$menuList = res.data;
						uni.setStorageSync('menuList', res.data);
						console.log('auth menulist')
						console.log(uni.$menuList)
					})
				}

				//设置字典数据
				uni.$cstDict = uni.getStorageSync('cstDict') || '';
				console.log('Storage cstDict')
				if (!uni.$cstDict) {
					//载入字典
					let reqData = {
						action: 'get_list',
						params: {}
					}
					apiCstDict(reqData)
						.then(res => {
							let dictArr = res.data;
							let newArr = {};
							let newArrSx = {};
							for (var key in dictArr) {
								let rowData = [];
								let rowDataSx = [];
								for (var i = 0; i < dictArr[key].length; i++) {
									rowData.push({
										label: dictArr[key][i].name,
										value: dictArr[key][i].id
									})
									rowDataSx.push(dictArr[key][i].name);
								}
								newArr[key] = rowData;
								newArrSx[key] = rowDataSx;
							}
							console.log('重新加数据=》整理数据：');
							console.log(newArr.level);
							uni.$cstDict = newArr;
							uni.$cstDictSx = newArrSx;
							uni.setStorageSync('cstDict', newArr);
							uni.setStorageSync('cstDictSx', newArrSx);
						});
				}

			}
		},
		onLoad() {
			that = this;
			uni.$userInfo = uni.getStorageSync('userInfo') || '';
			that.department_name = '我的工单';
			that.period_name = '今天';
			that.baoBiaoShow = true;
		},
		methods: {
			//点击跳转函数
			skipPageFun: function(obj) {
				let url = obj.url;
				if (uni.$isLoginFun()) {
					let userid = uni.$userInfo.id;
					let isHave = false;

					//如果是超管不限制权限，否则需要验证点击菜单是否授权过
					if (userid == '1') {
						isHave = true;
					} else {
						let mArr = uni.getStorageSync('menuList') || '';
						for (var i = 0; i < mArr.length; i++) {
							//console.log(mArr[i] + '=====' + obj.menu_id);
							if (mArr[i] == obj.menu_id) {
								isHave = true;
								break
							}
						}
					}

					//判断点击菜单权限是否存在授权列表中，是否跳转，
					if (isHave) {
						uni.navigateTo({
							url
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '暂无权限！',
							showCancel: false
						})
					}
				}
			},
			// 报表类型
			bmSelectChangeFun: function(e) {
				console.log(e[0].value);
				that.department = e[0].value;
				that.department_name = e[0].label;
			},
			// 报表时间
			ppSelectChangeFun: function(e) {
				console.log(e);
				that.period = e[0].value;
				that.period_name = e[0].label;
			},
		}
	}
</script>

<style>
	page {
		padding-bottom: 100rpx;
	}

	.box {
		box-sizing: border-box;
		border-radius: 16rpx;
		width: 686rpx;
		margin: 32rpx;
		padding: 26rpx;
		box-shadow: #dddddd 0px 0px 32rpx;
		background-color: #ffffff;
	}

	.tilte {
		font-size: 32rpx;
		font-weight: bold;
	}

	.cardList {
		margin-top: 26rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.card {
		font-size: 28rpx;
		width: 159rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.card>image {
		width: 68rpx;
		height: 68rpx;
		margin-bottom: 6rpx;
	}

	.iconClass {
		margin-bottom: 6rpx;
	}

	.dateSelectRow {
		margin: 0 32rpx;
		font-size: 15px;
		display: flex;
		justify-content: space-between;
	}

	.dateSelectRow>view {
		display: flex;
		align-items: center;
		padding: 10rpx 0 16rpx;
	}
</style>
